<template>
	<view>
		<swiper class="screen-swiper round-dot" :indicator-dots="dots" :autoplay="true" :interval="5000" :duration="1000" :indicator-color="color" :indicator-active-color="activeColor" :circular="true">
			<swiper-item class="" v-for="(item,index) in swipers" :key="index">
				<image :src="baseUrl + item" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	// TODO 可以传高度、轮播图的类型，是否可以衔接划动
	export default {
		data() {
			return {
				baseUrl: this.$api.baseUrl
			};
		},
		props: {
			swiperItems:{
				type: String,
				default: function() {
					return [];
				}
			},
			dots: {
				type: Boolean,
				default: true
			},
			color: {
				type: String,
				default: '#8799a3'
			},
			activeColor: {
				type: String,
				default: 'gray'
			}
		},
		computed: {
			swipers: function() {
				return this.swiperItems.split(',')
			}
		}
	}
</script>

<style lang="scss">
.screen-swiper {
		height: 750rpx;
	}
</style>
